<template>
    <div class="table-header">
        <el-input placeholder="请输入城市" style="width: 120px;" v-model="city"></el-input>
        <el-date-picker v-model="date_range" type="daterange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期"></el-date-picker>
        <el-button :icon="SearchOutlined" @click="search">搜索漫展</el-button>
        <el-button type="primary" @click="router.push('/homes/ex');">新建漫展</el-button>
    </div>
    <el-table :data="tableData" style="width: 100%; height:570px">
        <el-table-column type="expand" width="50">
            <template #default="scope">
                <el-row v-for="item, index in scope.row.cosers" :key="index"
                    :class="['border-bottom', index === 0 ? 'border-top' : '']" algin="middle">
                    <el-col :span="2">
                        <el-tag>{{ item.name }}</el-tag>
                    </el-col>
                    <el-col :span="4">
                        <img :src="item.imgurl" style="width: 50px; height: 50px;" />
                    </el-col>
                    <el-col :span="8">
                        {{ item.content }}
                    </el-col>
                </el-row>
            </template>
        </el-table-column>
        <el-table-column prop="id" label="ID" />
        <el-table-column prop="title" label="标题" />
        <el-table-column prop="stime" label="开始时间" />
        <el-table-column prop="etime" label="结束时间" />
        <el-table-column prop="city" label="城市" />
        <el-table-column prop="address" label="地址" >
            <template #default="scope">
                <el-text class="w-150px mb-2"  v-html="scope.row.address" truncated/>
            </template>
        </el-table-column>
        <el-table-column prop="price" label="价格" />
        <!-- <el-table-column prop="content" label="内容"/> -->
        <el-table-column prop="content" label="内容">
            <template #default="scope">
                <el-text class="w-150px mb-2"  v-html="scope.row.content" truncated/>
            </template>
        </el-table-column>
        <el-table-column label="封面">
            <template #default="scope">
                <img :src="scope.row.detail[0]" style="width: 50px; height: 50px;" />
            </template>
        </el-table-column>
        <!-- <el-table-column label="COSER">
            <template #default="scope">
                <span v-for="item in scope.row.cosers" :key="item.id">
                    <el-tag style="margin-right: 5px;">{{ item.name }}</el-tag>
                </span>
            </template>
        </el-table-column> -->
        <el-table-column prop="status" label="上架">
            <template #default="scope">
                <el-switch v-model="scope.row.status" @change="changeState(scope.row)"></el-switch>
            </template>
        </el-table-column>

    </el-table>
    <!-- 分页 -->
    <el-pagination v-model:currentPage="currentPage" v-model:pageSize="pageSize" :page-sizes="[1, 2, 3, 4]"
        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
</template>

<script setup>
/* 导入插件 */
import { DeleteOutlined, EditOutlined, SearchOutlined, SettingOutlined } from '@ant-design/icons-vue';
import { InfoFilled } from '@element-plus/icons-vue'
import axios from '../../axios.js';
import { ref, onBeforeMount, watchEffect, reactive } from 'vue'
import { ElMessage } from 'element-plus';
/* 分页 */
const total = ref(1)
const currentPage = ref(1)
const pageSize = ref(3)
const handleSizeChange = (val) => {
    console.log(`${val} items per page`)
    pageSize.value = val
}
const handleCurrentChange = (val) => { console.log(`current page:${val}`); currentPage.value = val }
/* 获取漫展数据 */
const tableData = ref([]);
let netData = ref([])
// 查询参数
/* 搜索设置 */
const search = () => {
    getEx()
}
const city = ref("")
const date_range = ref(["", ""])
const getEx = async () => {
    console.log(date_range);
    const { data: res } = await axios.get(`ex/page`, {
        params: {
            city: city.value,
            sDate: date_range.value !== null ? date_range.value[0] : "",
            eDate: date_range !== null ? date_range.value[1] : "",
            pageNum: currentPage.value,
            pageSize: pageSize.value
        }
    })
    tableData.value = [];
    // 假设你已经创建了名为 tableData 的 ref 对象
    res.data.records.forEach(ele => {
        tableData.value.push({
            id: ele.idZzxcsm,
            categoryId: ele.categoryIdZzxcsm,
            title: ele.titleZzxcsm,
            stime: ele.stimeZzxcsm,
            etime: ele.etimeZzxcsm,
            city: ele.cityZzxcsm,
            address: ele.addressZzxcsm,
            host: ele.hostZzxcsm,
            price: ele.priceZzxcsm,
            detail: ele.detailZzxcsm.split(','),
            content: ele.contentZzxcsm,
            status: ele.statusZzxcsm === 1 ? true : false,
            cosers: ele.cosersZzxcsm.map(coser => ({
                id: coser.idZzxcsm,
                exId: coser.exIdZzxcsm,
                name: coser.nameZzxcsm,
                imgurl: coser.imgurlZzxcsm,
                content: coser.contentZzxcsm
            }))
        });
    });
    total.value = res.data.total;
    netData.value = tableData.value
}
/* 设置刷新 */
onBeforeMount(() => {
    getEx();
})
watchEffect((currentPage, pageSize) => {
    getEx()
})
/* 路由管理 */
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
/* 切换上架状态 */
const changeState = async (ex) => {
    console.log(ex);
    var s = ex.status === true ? 1 : 0
    const { data: res } = await axios.put(`ex/${ex.id}/status/${s}`)
}
</script>

<style scoped></style>
